<template>
	<div class="workPlace" @click="inputJJ">
		<div class="Maincontain">
			<div class="zhanwei"></div>
			<div class="topImg_logo">
		        <img src="@/assets/workplace.png" class="app-login-logo" />
			</div>
            <p class="title_all">自助扫码送样终端<i></i></p>
			<div class="worktable">
				<table>
					<tr>
						<th >检验编码</th>
						<th>样品名称</th>
						<th>样品批号</th>
						<th>等级</th>
						<th>送样地点</th>
					</tr>
					<tr>
						<td class="col1">{{sampleDetail.sampleCode}}</td>
						<td class="col">{{sampleDetail.materialName}}</td>
						<td class="col">{{sampleDetail.sampleNum}}</td>
			            <td class="col2">{{sampleDetail.materialGrade}}</td>
			            <td class="col2">{{sampleDetail.locationName}}</td>
					</tr>
				</table>
			</div>
			<div class="workForm">
                <div class="fontLeft">
                    <i class="iconfont icon-saomafukuan-"></i>
                </div>
				<el-input type="text" class="workInput" autofocus v-model="sampleCode"  placeholder="请扫待送样品的检验单号" id="workJJ"/>
			</div>
		</div>
        <div v-show="isSuccess" class="song_success">
            <i class="iconfont icon-wancheng"></i>
            <div class="nav2">
                <p>T21030211,徐伟</p>
                <p class="txt">送样成功</p>
            </div>
        </div>
        <div v-show="isSuccess" class="song_success fail">
            <i class="iconfont icon-cuowu"></i>
            <div class="nav2 nav3">
                <p>已送样，无效</p>
            </div>
        </div>
	</div>
</template>

<script>
  export default {
    name:"workPlace",
    data(){
      return{
        sampleCode:"",
        sampleDetail:{},
        isSuccess: true,
      }
    },
    created(){
      this.validatorIp();
    },
    mounted() {
      let self = this;
      self.inputJJ();
      setTimeout(() => {
        self.isSuccess = false
      }, 3000)
    },
    methods:{

     validatorIp(){
       let self = this;
       self.$http({
         url: "/drug/sample/validatorIp",
         method: "post",
       }).then(resp => {
         if(!resp.success){
           self.$router.push({path: '/login'})
         }
       });
     },

      inputJJ(){
        let input=document.getElementById('workJJ');
        input.focus();
      },

      showTip(type){
         if(type == '3'){
           this.$notify({
             title: '提示',
             message: "送样成功!",
             type: 'success'
           });
         }
        if(type == '1'){
          this.$notify({
            title: '提示',
            message: "此码无效!",
            type: 'error'
          });
        }
        if(type == '2'){
          this.$notify({
            title: '提示',
            message: "已送在检，别扫了！",
            type: 'warning'
          });
        }
      },

      updateWorkSample(sampleCode){
        let self = this;
        self.$http({
          url: "/drug/sample/updateWorkSample",
          method: "post",
          params:{sampleCode:sampleCode}
        }).then(resp => {
          self.sampleCode = "";
          let sample = resp.result;
          let type = sample.checkStatus?(sample.checkStatus !=1?'2':'3'):'1';
          if(type =='3'){
            self.sampleDetail = sample;
          }
          self.showTip(type);
        });
      },
    },
    watch:{
      sampleCode(val){
        let self =this;
        if(!val){
          return;
        }
        if(val.length == 10){
          self.updateWorkSample(val);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
@font-face{
    font-family: 'fonta';
    src : url('../../assets/fontFamily.ttf');
}
	.workPlace {
		width: 100%;
		height: 100%;
		background-color: #009b96;
    	display: flex;
        justify-content: center;
        /*align-items: center;*/
        .Maincontain {
        	width: 100%;
        	overflow: auto;
        	/*margin-top: -5%;*/
        	.zhanwei {
        		height: 8%;
        	}
	        .topImg_logo {
        		width: 367px;
				height: 50px;
				margin: 0 auto;
	        }
            .title_all {
                font-size: 60px;
                color: #fff;
                text-align: center;
                margin: 30px;
                font-family: fonta;
            }
	        .workForm {
        		width: 30%;
	        	margin: auto;
                display: flex;
                position: fixed;
                bottom: 15%;
                left: 35%;
	        	p {
	        		margin: 0;
	        	}
                .fontLeft {
                    width: 80px;
                    height: 40px;
                    background: #333f50;
                    position: absolute;
                    z-index: 1111;
                    left: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .iconfont {
                        font-size: 30px;
                        text-align: center;
                        color: #fff;
                    }
                }

	        }
	        .worktable {
	        	width: 100%;
	        	padding: 3% 0;
				margin:0 auto;
		    	display: flex;
		        justify-content: center;
				width: 1200px;
	        	table {
					empty-cells:show;
					border-collapse: collapse;
					font-size: 28px;
					width: 100%;
                    border: 1px solid #88dce0;
					/*table-layout:fixed;*/
					color: #fff;
					th {
						height:50px;
						line-height: 50px;
						padding:0 1em 0;
						text-align: center;
						font-weight: 400;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
                        border-bottom: 1px solid #88dce0;
					    font-size: 20px;
					}
					td {
						height:70px;
						line-height: 70px;
						padding:0 1em 0;
						text-align: center;
						font-weight: 400;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						color: #ffeb3b;
					}
					.col2 {
						width: 170px
					}
					.col1 {
						width: 200px
					}
					.col {
						max-width: 330px
					}
	        	}
	        }
	    }
        .song_success {
            position: absolute;
            background: #fff;
            border-radius: 10px;
            width: 450px;
            left: calc(50% - 225px);
            bottom: 30%;
            .iconfont {
                color: #4caf50;
                font-size: 50px;
                position: absolute;
                left: 50px;
                top: 30px;
            }
            .nav2 {
                width: 100%;
                color: #4caf50;
                padding: 30px 15px;
                p {
                    margin: 0;
                    height: 30px;
                    line-height: 30px;
                    font-size: 22px;
                    text-align: center;
                }
                .txt {
                    font-size: 24px;
                }
            }
            &.fail {
                .iconfont {
                    color: #fc6552;
                }
                .nav3 {
                    color: #fc6552;
                    p {
                        height: 60px;
                        line-height: 60px;
                        color: #333;
                    }
                }
            }
        }
	}
</style>
